<template>
	<view class="container">
		<!-- 地图模块 -->
		<view class="map">
			<map style="width: 100%; height: 145px" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>
		<!-- 动态内容模块 -->
		<view class="dynamicContent">
			<view class="tabs">
				<view v-for="(item, index) in tabs" :key="index" class="tab-item"
					:class="{ active: activeIndex === index }" @click="switchTab(index)">
					{{ item.name }}
				</view>
			</view>
			<view class="tab-content">
				<view v-show="activeIndex === 0">
					<!-- 第一个标签页的内容 -->
					<view class="text">
						<text>位置</text>
						<input v-model="formData.position" type="text" placeholder="请输入您所在地点" />
					</view>
					<view class="text">
						<text>求助人</text>
						<input v-model="formData.name" type="text" placeholder="请输入您的姓名" />
					</view>
					<view class="text">
						<text>联系电话</text>
						<input v-model="formData.phone" type="text" placeholder="请输入您的手机号" />
					</view>
					<view class="text">
						<text>车牌</text>
						<input v-model="formData.carNum" type="text" placeholder="请输入您的车牌" />
					</view>
					<view class="description">
						<text>请准确描述当前状况豫所需帮助。</text>
					</view>
				</view>
				<view v-show="activeIndex === 1">
					<!-- 第二个标签页的内容 -->
					<view class="text">
						<text>位置</text>
						<input v-model="formData.position" type="text" placeholder="请输入您所在地点" />
					</view>
					<view class="text">
						<text>求助人</text>
						<input v-model="formData.name" type="text" placeholder="请输入您的姓名" />
					</view>
					<view class="text">
						<text>联系电话</text>
						<input v-model="formData.phone" type="text" placeholder="请输入您的手机号" />
					</view>
					<view class="text">
						<text>车牌</text>
						<input v-model="formData.carNum" type="text" placeholder="请输入您的车牌" />
					</view>
					<view class="description">
						<text>请准确描述当前状况豫所需帮助。</text>
					</view>
				</view>
				<view v-show="activeIndex === 2">
					<!-- 第三个标签页的内容 -->
					<view class="text">
						<text>起点</text>
						<input v-model="formData.position" type="text" placeholder="请输入您所在位置" />
					</view>
					<view class="text">
						<text>终点</text>
						<input v-model="formData.end" type="text" placeholder="请输入您拖车去往的最终地点" />
					</view>
					<view class="text">
						<text>求助人</text>
						<input v-model="formData.name" type="text" placeholder="请输入您的姓名" />
					</view>
					<view class="text">
						<text>联系电话</text>
						<input v-model="formData.phone" type="text" placeholder="请输入您的手机号" />
					</view>
					<view class="text">
						<text>车型</text>
						<!-- 下拉框 -->
						<select v-model="formData.carType">
							<option value="1">小轿车</option>
							<option value="2">SUV</option>
							<option value="3">商务车</option>
							<option value="4">货车</option>
							<option value="5">跑车</option>
						</select>
					</view>
					<view class="description">
						<text>请准确描述当前状况豫所需帮助。</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 警务求助信息 -->
		<view class="policing">
			<view class="policeHelp">
				<text>警务求助</text>
			</view>
			<view class="police_item">
				<view class="police_item_text">
					<text>交通事故</text>
					<text class="item_text_two">112</text>
				</view>
				<view class="police_item_text">
					<text>火警</text>
					<text class="item_text_two">119</text>
				</view>
				<view class="police_item_text">
					<text>急救中心</text>
					<text class="item_text_two">120</text>
				</view>
				<view class="police_item_text">
					<text>公安预警</text>
					<text class="item_text_two">110</text>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btn">
			<button @click="submitForm">呼叫救援</button>
		</view>
		<!-- 救援记录 -->
		<view class="records">
			<text @click="records">救援记录</text>
		</view>
		<view>
			<Tabbar :pageIndex="1"></Tabbar>
		</view>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar/tabbar.vue'; // 或者根据实际路径引入组件
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				tabs: [{
						name: '搭电'
					},
					{
						name: '换胎'
					},
					{
						name: '拖车'
					},
				],
				activeIndex: 0, // 默认激活的标签页索引
				formData: {
					uid: '7',
					position: '河南省郑州市中原区莲花街11号',
					end: '',
					name: '1',
					phone: '1',
					carNum: '1',
					carType: '',
					time: new Date().toISOString(),
					typeId: '1',
				}
			};
		},
		methods: {
			switchTab(index) {
				this.activeIndex = index;
				this.formData.typeId = index+1;
				console.log(this.formData.typeId)
			},
			//呼叫救援
			submitForm() {
				console.log(111)
				uni.request({
					url: 'http://localhost:7001/ruoyi-merchant/rescueTask',
					method: 'POST',
					data: this.formData,
					header: {
						'authorization': 'Bearer ' +
							'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjhhMjg1Mjc0LWU3NjktNGRlMS05ZmRkLTk3OGMyNzcyNTc3NCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.6iqnzM36dUZR6tmAUNU1DoAP2z2dgAwCe5X7lkDnPWK8UUC5GRP6vSe4UnjLpgU1KHAyXupWcZpy4wKwPcE-aw'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
							uni.navigateTo({
								url: "/pages/rescue/wite/wite"
							})
						} else {
							uni.showToast({
								title: '提交失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				})
			},
			//救援记录
			records() {
				uni.navigateTo({
					url: "/pages/rescue/rescueRecords/rescueRecords"
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	/* 页面容器 */
	.container {
		display: flex;
		flex-direction: column;
	}

	/* 地图定位模块 */
	.map {
		display: flex;
		width: 100%;
		height: 150px;
	}

	.map>image {
		flex: 1;
		/* 子容器将填充剩余空间 */
		height: 150px;
	}

	/* 动态内容模块 */
	.dynamicContent {
		width: 375px;
		/* height: 310px; */
		background-color: #FFFFFF;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #f8f8f8;
	}

	.tab-item {
		width: 60%;
		padding-top: 10px;
		text-align: center;
	}

	.active {
		color: #ff0000;
		border-bottom: 2px solid #ff0000;
	}

	.tab-content {
		padding: 0 10px;
	}

	.text {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		border-bottom: 1px solid #EFEFEF;
		padding: 7px 0;
		padding-right: 32px;
	}

	.text>text {
		width: 20%;
		height: 25px;
		line-height: 25px;
		color: #101010;
		font-size: 14px;
		text-align: left;
	}

	.text>input {
		width: 80%;
		height: 25px;
		font-size: 14px;
		border: 1px solid #BBBBBB;
		padding: 0 5px;
	}

	.text>select {
		width: 80%;
		height: 25px;
		font-size: 14px;
		border: 1px solid #BBBBBB;
		padding: 0 5px;
	}

	/* 故障描述 */
	.description {
		padding: 0 30px;
		width: 100%;
		height: 20px;
		line-height: 20px;
		color: rgba(234, 23, 3, 1);
		font-size: 14px;
		text-align: left;
	}

	/* 警务求助 */
	.policing {
		background-color: #FFFFFF;
	}

	.policeHelp {
		padding-left: 18px;
	}

	.police_item {
		display: flex;
		/* 可换行 */
		flex-wrap: wrap;
		padding: 0px 18px;
	}

	.police_item>view {
		width: 50%;
		height: 26px;
		line-height: 26px;
		font-size: 12px;
	}

	.police_item_text {
		display: flex;
		flex-direction: column;
		/* 设置主轴为垂直方向 */
		flex-wrap: wrap;
		/* 允许项目在必要时换行 */
	}

	.police_item_text>text:nth-child(2) {
		padding-right: 10rpx;
	}

	.item_text_two {
		color: #1D6FFF;
		text-align: right;
	}

	/* 底部按钮 */
	.btn {
		background-color: #FFFFFF;
	}

	.btn>button {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		background-color: #FD9518;
		width: 233px;
		height: 37px;
		border-radius: 15px;
		font-size: 14px;
		color: #FFFFFF;
	}

	.records {
		/* 居中 */
		display: flex;
		justify-content: center;
		margin-top: 5px;
		color: #1D6FFF;
		font-size: 16px;
	}
</style>